<template>
  <div class="app-wrapper">
    <headerTitle
      :titleList="titleList"
      :hideButton="true"
      :btnTitle="'新增'"
      :btnExport="'导出名单'"
      :exportShow="false"
      icon="iconfont icon-huiyuanzhucedengluguanli"
      @handelClick="() => add()"
      @handelExport="() => exportUser()"
    />
    <div class="app-container">
      <div class="containerMain">
        <div class="search-item">
          <div class="item-list">
            <div class="item-con">
              <div class="zlktab" @click="pptData" :class="{fontColor:resortType==1}">PPT/PDF资料库</div>
              <div class="zlktab" @click="videoData" :class="{fontColor:resortType==2}">视频资料库</div>
              <div class="zlktab" @click="hrefData" :class="{fontColor:resortType==3}">链接资料库</div>
            </div>
          </div>
          <div class="item-btn">
            <!-- <el-button
              class="kyeup_search_btn"
              type="primary"
              size="mini"
              @click="() => fetchData()"
              >搜索</el-button
            >
            <el-button type="default" size="mini" @click="() => reset()"
              >重置</el-button
            > -->
            <el-button
              class="kyeup_search_btn"
              type="primary"
              size="mini"
              @click="() => addData(resortType)"
              >添加资料</el-button
            >
          </div>
        </div>
        <div class="search-item">
          <div class="item-list">
            <div class="item-con">
              <span>日期</span>
              <el-date-picker
                  v-model="timeValue"
                  unlink-panels
                  size="mini"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
            </div>
            <div class="item-con">
              <span>名称</span>
              <el-select
                size="mini"
                clearable
                v-model="searchform.enable"
                placeholder="全部"
              >
                <el-option label="视频面签" value="1"></el-option>
                <el-option label="法人开户" value="2"></el-option>
              </el-select>
            </div>
          </div>
          <div class="item-btn" v-show="resortType==3">
            <el-button
              class="kyeup_search_btn"
              type="primary"
              size="mini"
              @click="() => fetchData()"
              >查找</el-button
            >
          </div>
        </div>
        <div class="container">
          <div class="div-table">
            <el-table
              :header-cell-style="headerStyle"
              :data="list"
              element-loading-text="Loading"
              fit
              size="mini"
              highlight-current-row
            >
              <el-table-column label="创建日期">
                <template slot-scope="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column label="文件名称" v-if="resortType==1">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="视频名称" v-if="resortType==2">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="链接名称" v-if="resortType==3">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="文件大小" v-if="resortType==1">
                <template slot-scope="scope">{{
                  scope.row.enable | statusFilter
                }}</template>
              </el-table-column>
              <el-table-column label="视频大小" v-if="resortType==2">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="链接大小" v-if="resortType==3">
                <template slot-scope="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                  <el-button type="text" @click="() => viewFn(scope.row,resortType)"
                    >查看</el-button
                  >
                  <el-button type="text" @click="() => editBtn(scope.row,resortType)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    @click="() => del(scope.row,resortType)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <pagination
      :exportShow="false"
      :type="'primary'"
      :pagination="pagination"
    />
    <!-- 添加链接资料库 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="链接名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" style="width:80%" placeholder="请输入链接名称"></el-input>
            </el-form-item>
            <el-form-item label="链接地址" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" style="width:80%" placeholder="请输入链接地址"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAdd">确 定</el-button>
        </div>
    </el-dialog>
  </div>
  
</template>

<script>
import moment from "moment";
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchList,fetchDeleteSkill
} from "@/api/systemapi/skill";
import { pageParams } from "@/settings";

export default {
  components: {
    Pagination,
    HeaderTitle
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "启用",
        2: "禁用",
      };
      return statusMap[status];
    },
  },
  data() {
    const TODAYSTART = moment().startOf('day').format('YYYY-MM-DD 00:00:00')
    const TODAYEND = moment().endOf('day').format('YYYY-MM-DD 23:59:59')
    return {
      titleList: [{ title: "业务设置" },{ title: "资料库" },{ title: "目录1" }],
      list:[],
      resortType:1,//分类
      ispptData:true ,
      isvideoData:false,
      ishrefData:false,
      timeValue: [TODAYSTART, TODAYEND],
      searchform: {
        sTime:"",
        eTime:"",
        enable:"",
        rows: "10",
        page: "1",
      },
      // 分页
      pagination: pageParams,
      title:"添加",
      dialogFormVisible: false,
      form: {
          name: '',
          skillGroup:"",
      },
      formLabelWidth: '120px',
    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function () {
      this.searchform.page = this.pagination.currentPage;
      this.fetchData();
    },
    "pagination.pageSize": function () {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.fetchData();
    },
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    pptData(){
      this.resortType=1
    }, 
    videoData(){
      this.resortType=2
    }, 
    hrefData(){
      this.resortType=3
    },
    exportUser() {
      downloadUserInfo({
        exportType: 1,
        ...this.searchform,
      }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    exportDemo() {
      downloadUserInfo({ exportType: 2 }).then((res) => {
        let blob = new Blob([res.data], {
          type: "application/vnd.ms-excel",
        });
        let str = res.headers["content-disposition"].split(";")[1];
        // console.log(str,"str1111")
        if (str.indexOf("=") != -1) {
          var filename = decodeURI(str.slice(9));
        } else {
          var filename = decodeURI(str);
        }
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = filename; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666";
      }
    },
    // 重置搜索，刷新列表
    reset() {
      const TODAYSTART = moment().startOf('day').format('YYYY-MM-DD 00:00:00')
      const TODAYEND = moment().endOf('day').format('YYYY-MM-DD 23:59:59')
      this.timeValue = [TODAYSTART, TODAYEND],
      this.searchform = {
        sTime:this.timeValue[0],
        eTime:this.timeValue[1],
        enable:"",
        rows: "10",
        page: "1",
      }
      this.fetchData();
    },
    fetchData() {
        if (this.timeValue != null && this.timeValue.length > 0) {
          this.searchform.sTime = moment(this.timeValue[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.searchform.eTime = moment(this.timeValue[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        console.log(this.searchform.sTime,"231232312");

      fetchList({...this.searchform}).then((response) => {
        if (response.code == 0) {
          this.list = response.data.list;
          this.pagination.total = response.data.records;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    //添加资料
    addData(resortType){
      if(resortType==1){
        this.$router.push({
          name: "pptdetail",
          // query: { type: 3},
        });
      }else if(resortType == 2){
        this.$router.push({
          name:"videodetail"
        })
      }else if(resortType == 3){
        this.dialogFormVisible=true
      }
    },
    //链接资料库 保存
    saveAdd(){
      this.dialogFormVisible=false
      alert(1)
      // fetchAdd({ ...this.form }).then((response) => {
        //   if (response.code == 0) {
        //     this.dialogFormVisible=false;
        //   } else {
        //     this.$message({
        //       type: "error",
        //       message: response.msg,
        //     });
        //   }
        // });
    },
    // 删除
    del(data) {
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        fetchDeleteSkill({id:data.id}).then((response) => {
          if (response.code === 0) {
            this.fetchData();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$message({
              message: response.msg,
              type: "error",
            });
          }
        });
      });
    },
    // 新增
    add(data,resortType) {
      // this.$router.push({
      //   path: "/system/skill/detail",
      //   query: { type: 3},
      // });
    },
    //编辑
    editBtn(data,resortType) {
      // this.$router.push({
      //   path: "/system/skill/detail",
      //   query: { type: "2", id: data.id},
      // });
    },
    //查看
    viewFn(data,resortType) {
        // this.$router.push({
        // path: "/system/skill/detail",
        // query: { type: "1", id: data.id},
      // });
      console.log(resortType,"111")
    }},
    
    
};
</script>
<style lang="scss">
.tree-con {
  .el-tree-node__content {
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss" scoped>
.containerMain {
  .search-item {
    padding: 10px;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
    .item-list {
      display: flex;
      flex-wrap: wrap;
    }
    .item-con {
      display: flex;
      margin-right: 30px;
      .fontColor{
          background: #379DFF;
          color:#FFFFFF !important;
      }
      .zlktab{
          box-sizing: border-box;
          width:150px;
          height: 30px;
          text-align: center;
          margin-right: 30px;
          padding: 5px;
          color: #505559;
          border: 1px solid #abafb3;
          border-radius: 2px;
          cursor: pointer;
      }
      span {
        display: inline-block;
        line-height: 28px;
        margin-right: 10px;
      }
    }
    .item-btn{
        flex: 0 0 140px;
    }
    .item {
      width: 180px;
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    .div-tree {
      width: 250px;
    }
    .div-table {
      flex: 1;
      width: 100%;
      overflow: hidden;
      .el-table {
        height: 100%;
        width: 100%;
        overflow: auto;
      }
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
